import React from 'react'
import { request } from 'utils'
import { apiPrefix } from 'utils/config'
import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox, Table } from 'antd'
import classnames from 'classnames'
import { CloseOutlined } from '@ant-design/icons'
import { Trans } from '@lingui/react'
import api from '@/services/api'
import { Page } from 'components'

import styles from './index.less'
class RequestPage extends React.Component {
  formRef = React.createRef()
  constructor(props) {
    super(props)
    this.state = {
      method: 'GET',
      url: '/api/v1/routes',
      keys: [1],
      result: null,
      visible: true,
    }
  }
  render() {
    const columns = [
      {
        title: 'Full Name',
        width: 100,
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
      },
      {
        title: 'Age',
        width: 100,
        dataIndex: 'age',
        key: 'age',
        fixed: 'left',
      },
      {
        title: 'Column 1',
        dataIndex: 'address',
        key: '1',
        width: 150,
      },
      {
        title: 'Column 2',
        dataIndex: 'address',
        key: '2',
        width: 150,
      },
      {
        title: 'Column 3',
        dataIndex: 'address',
        key: '3',
        width: 150,
      },
      {
        title: 'Column 4',
        dataIndex: 'address',
        key: '4',
        width: 150,
      },
      {
        title: 'Column 5',
        dataIndex: 'address',
        key: '5',
        width: 150,
      },
      {
        title: 'Column 6',
        dataIndex: 'address',
        key: '6',
        width: 150,
      },
      {
        title: 'Column 7',
        dataIndex: 'address',
        key: '7',
        width: 150,
      },
      { title: 'Column 8', dataIndex: 'address', key: '8' },
      {
        title: 'Action',
        key: 'operation',
        fixed: 'right',
        width: 100,
        render: () => <a>action</a>,
      },
    ];

    const data = [];
    for (let i = 0; i < 100; i++) {
      data.push({
        key: i,
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
      });
    }

    return (
      <Page inner>
         <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />,
      </Page>
    )
  }
}

export default RequestPage
